<template>
  <div class="container">
    <!-- 简历筛选与管理 -->
    <a-card class="item" title="简历筛选与管理">
      <template #extra>
        <a-button type="link" @click="router.push('/CVPollManage')">详情</a-button>
      </template>
      <div class="statistic-container">
        <a-statistic title="简历总数" :value="807" />
        <a-statistic title="已处理简历" :value="800" />
        <a-statistic title="待处理简历" :value="7" />
        <a-statistic title="已拒绝简历" :value="400" />
      </div>
    </a-card>

    <!-- 招聘流程跟踪 -->
    <a-card class="item" title="职位管理">
      <template #extra>
        <a-button type="link" @click="router.push('/positionManage')">详情</a-button>
      </template>
      <div class="statistic-container">
        <a-statistic title="职位总数" :value="totalPosition" />
        <a-statistic title="我创建的职位" :value="myPositionNum" />
      </div>
      <div class="chart-container">
        <e-charts class="chart" :option="positionStatus" />
      </div>
    </a-card>

    <!-- 面试安排 -->
    <a-card class="item" title="待办信息">
      <template #extra>
        <a-button type="link" @click="router.push('/todo')">详情</a-button>
      </template>
      <a-statistic title="未处理待办数" :value="store.total" />
      <div class="list">
        <a-list item-layout="horizontal" size="small" :data-source="todoData">
          <template #renderItem="{ item }">
            <a-list-item>
              <a-list-item-meta :description="item.positionName">
                <template #title>
                  <span
                    style="cursor: pointer; font-size: large; font-weight: bold"
                    @click="router.push('/todo')"
                  >
                    {{ item.title }}</span
                  >
                </template>
              </a-list-item-meta>
            </a-list-item>
          </template>
        </a-list>
      </div>
    </a-card>

    <!-- 招聘进度查看 -->
    <a-card class="item" title="邀约信息">
      <template #extra>
        <a-button type="link" @click="router.push('/invitationManage')">详情</a-button>
      </template>
      <div class="statistic-container">
        <a-statistic title="已发起邀约数" :value="12" />
        <a-statistic title="已终止邀约数" :value="12" />
      </div>
      <div class="chart-container-pass">
        <e-charts class="chart" :option="specialityNum" />
        <e-charts class="chart" :option="salaryRange" />
      </div>
      <!-- 这里可以添加招聘进度查看的相关内容 -->
    </a-card>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import ECharts from 'vue-echarts' // 导入 ECharts 组件
import 'echarts' // 导入 ECharts 核心库
import { useTodoInfo } from '@/stores/todoSrore'
import { useResumeStore } from '@/stores/resumeStore'
import { useUserStore } from '@/stores/userStore'
import { message } from 'ant-design-vue'
import server from '@/api'

const router = useRouter()
const store = useTodoInfo()
const resumeStore = useResumeStore()
const userStore = useUserStore()
const salaryRange = computed(() => {
  return {
    title: {
      text: '薪资范围分布',
      left: 'center',
    },
    toolbox: {
      feature: {
        saveAsImage: {},
      },
    },
    tooltip: {
      trigger: 'item',
      formatter: '{a} <br/>{b}: {c} ({d}%)',
    },
    series: [
      {
        name: '薪资范围',
        type: 'pie',
        radius: '70%',
        center: ['50%', '50%'],
        data: salaryEData.value,
      },
    ],
  }
})
const positionStatus = computed(() => {
  return {
    title: {
      text: '职位状态分布',
      bottom: '20',
      left: 'center',
    },
    tooltip: {
      trigger: 'item',
    },
    toolbox: {
      feature: {
        saveAsImage: {},
      },
    },
    legend: {
      top: '5%',
      left: 'center',
    },
    series: [
      {
        name: '职位状态',
        type: 'pie',
        radius: ['40%', '70%'],
        center: ['50%', '70%'],
        startAngle: 180,
        endAngle: 360,
        data: statusEData.value,
      },
    ],
  }
})
const specialityNum = computed(() => {
  return {
    title: {
      text: '用户专业分布',
      left: 'center',
    },
    toolbox: {
      feature: {
        saveAsImage: {},
      },
    },
    tooltip: {
      trigger: 'item',
      // 调整提示框样式
      backgroundColor: 'rgba(0, 0, 0, 0.7)', // 设置提示框背景颜色为半透明黑色
      borderColor: '#fff', // 设置提示框边框颜色为白色
      borderWidth: 1, // 设置提示框边框宽度
      padding: 10, // 设置提示框内边距
      textStyle: {
        color: '#fff', // 设置提示框文字颜色为白色
      },
    },
    legend: {
      orient: 'vertical',
      left: 'left',
    },
    series: [
      {
        name: '用户专业',
        type: 'pie',
        // 适当减小半径，留出更多空间
        radius: '40%',
        data: majorEData.value,
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)',
          },
        },
      },
    ],
  }
})
const todoData = computed(() => {
  return store.todoList.map(item => {
    return {
      title: item.userName,
      positionName: item.positionName,
    }
  })
})
const statusRatios = ref()
const statusEData = ref()
const getStatusRatios = async () => {
  const res = await server.getStatusRatios()
  if (res.data.code === 0) {
    statusRatios.value = res.data.data.dataList
    statusEData.value = statusRatios.value.map(item => {
      switch (item.status) {
        case 0:
          item.status = '已创建'
          break
        case 1:
          item.status = '已发布'
          break
        case 2:
          item.status = '已暂停'
          break
        case 3:
          item.status = '已关闭'
          break
        case 5:
          item.status = '已招满'
          break
      }
      return {
        value: item.count,
        name: item.status,
      }
    })
  }
}
const salaryRatios = ref()
const salaryEData = ref()
const getSalaryRatios = async () => {
  const res = await server.getSalaryRatios()
  if (res.data.code === 0) {
    salaryRatios.value = res.data.data.dataList
    salaryEData.value = salaryRatios.value?.map(item => {
      return {
        value: item.count,
        name: item.salary,
      }
    })
  }
}
const majorRatios = ref()
const majorEData = ref()
const getMajorRatios = async () => {
  const res = await server.getApplicantMajorRatio()
  if (res.data.code === 0) {
    majorRatios.value = res.data.data.dataList
    majorEData.value = majorRatios.value?.map(item => {
      return {
        value: item.count,
        name: item.major,
      }
    })
  }
}
const totalPosition = ref()
const myPositionNum = ref()
const getMyPositionList = async () => {
  try {
    let params = {
      userId: userStore.userAccount,
      pageSize: 10,
      current: 1,
    }
    const res = await server.getlistMyPostVOByPage(params)
    if (res.data.code === 0) {
      myPositionNum.value = res.data.data.total
    } else {
      message.error(`获取我的职位列表失败: ${res.data.message}`)
    }
  } catch (e) {
    message.error(`获取我的职位列表时发生错误: ${e.message}`)
  }
}
// 获取全部状态下列表
const getAllPositionList = async () => {
  try {
    let params = {
      pageSize: 10,
      current: 1,
    }
    const res = await server.getlistPostVOByPage(params)
    if (res.data.code === 0) {
      totalPosition.value = res.data.data.total
    } else {
      message.error(`获取所有职位列表失败: ${res.data.message}`)
    }
  } catch (e) {
    message.error(`获取所有职位列表时发生错误: ${e.message}`)
  }
}

onMounted(() => {
  getStatusRatios()
  getSalaryRatios()
  getMajorRatios()
  getMyPositionList()
  getAllPositionList()
})
</script>

<style scoped>
.container {
  display: grid;
  width: 100%;
  grid-template-columns: repeat(2, 1fr);

  /* gap: 1rem; */
}

.item {
  margin: auto;
}

:deep(.ant-card) {
  width: 800px;
  height: 400px;
}

.statistic-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 两列布局 */
  gap: 1rem; /* 卡片之间的间距 */
}

.chart-container {
  display: flex;
  justify-self: center;
  width: 300px;
  height: 300px;
}

.chart-container-pass {
  display: flex;
  width: 600px;
  height: 240px;
}

.chart {
  width: 300px; /* 调整单个图表的宽度 */
  height: 240px;
}

.list {
  overflow-y: auto;
  max-height: 200px;
  margin-top: 10px;
}
</style>
